<template>
    <div class="testView02 full-body">
        <!-- <g-one-two style="width:300px;height:300px">
            <template v-slot:left-mid>
                <span>
                    1
                </span>
            </template>
            <template v-slot:right-top>
                <span>
                    1
                </span>
            </template>
            <template v-slot:right-bottom>
                <span>
                    1
                </span>
            </template>
        </g-one-two> -->

        <!-- <g-simple-page :data="pageData"></g-simple-page> -->
        <!-- <g-onoff :data="data"></g-onoff> -->

        <!-- <g-skeleton :ani="true"></g-skeleton>
        <g-img-skeleton :ani="true" :width="200" :height="200"></g-img-skeleton> -->
        <!-- <g-tag v-for="(item,index) in tagList" :key="index" :type="item.type" :close="false">{{item.text}}</g-tag>
        <button @click="empty">empty</button>

        <g-block-next :stickOut="true">
            <template v-slot:title>
                默认安装（推荐）   
            </template>
            <template v-slot:des>
                使用系统默认推荐的安装，可以满足最基本的需求，后期需要自己安装其他插件
            </template>
        </g-block-next>
        <g-block-next>
            <template v-slot:title>
                自定义安装
            </template>
            <template v-slot:des>
                根据需求自己选择需要安装的插件和安装位置
            </template>
        </g-block-next> -->
        <g-empty-pop ref="empty_pop" :zIndex="999">
            <h1>hello</h1>
        </g-empty-pop>
        <button class="btn" @click="emptyJump">click</button>


        <g-badge value="1"  >
            活动
            
        </g-badge>
        <g-badge value="hot" type="success">活动</g-badge>
        <!-- <g-badge value="hot" :isDot="true" type="warning">活动</g-badge> -->
        <g-badge value="hot" :isDot="true" type="error" >
            活动
            
        </g-badge>
        <span class="aaa " style="position:relative;">
            hello
            <g-tips type="bottom">提示</g-tips>
        </span>
        
        <g-f-pop ref="g_f_pop">
            
        </g-f-pop>
        <button @click="cli">点击</button>
        
    </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue';
import gFPop from '@/components/modulmsg/FrameFormPop.vue'
export default{
    name:'testView01',
    components:{gFPop},
    setup(){
        const { proxy } =  getCurrentInstance();
        let data = ref({});
        setTimeout(() => {
            data.value ={
                onText:'启用',
                offText:'禁用',
                state:true,
                fun:function(state){
                    console.log(state);
                }
            } 
        }, 2000);
        let pageData =ref({});
        setTimeout(() => {
            pageData.value = {total:30,pages:10,size:10,current:1,fun:function(current){console.log(current);}}
        }, 1000);

        let tagList = [
            {text:'111',type:'default'},
            {text:'222',type:'success'},
            {text:'333',type:'warning'},
            {text:'444',type:'error'}
        ]



        
        let empty_pop = ref(null);
        let emptyJump = ()=>{
            let empty_pop_data = {
                title:'hello',
                confirm:true,
                opera:{
                    cancel:{
                        text:'取消',
                        callOff:function(change){
                            change(empty_pop_data)
                        }
                    },
                    next:{
                        text:'确定',
                        success:function(change){
                            console.log("你点击了确定");
                            change(empty_pop_data);
                        }
                    }
                },
            };
            empty_pop.value.change(empty_pop_data);
        }

        let tips = ()=>{
            alert(123)
        }

        let g_f_pop = ref(null);
        let cli = ()=>{
            let g_f_pop_data = {
                title:'用户新增',
                body:'有个body',
                payload:{msg:'123'},
                confirm:true,
                success:function(payload){
                    console.log(payload);
                    g_f_pop.value.change(g_f_pop_data);
                }
            }
            g_f_pop.value.change(g_f_pop_data);
        }


        // 通过组件的ref进行获取


        return{
            cli,
            tagList,
            pageData,
            data,
            tips,
            g_f_pop,
            empty_pop,
            emptyJump
        }
        

    }
}
</script>
<style>
    .tip{
        width: 100px;
        text-align: center;
        position: relative;
    }
    .tip:hover:after {
        position:absolute;
        top:20px;
        left:50%;
        transform: translateX(-50%);
        content:attr(data-title);

        color:#ffffff;
        border-radius:5px ;
        background-color:#909399;
        padding: 5px;
        transition: .3s;
    }
    .aaa:hover .toolTips{
        visibility: visible;
        opacity: 1;
    }
</style>